<template>
	<view>
		<view class="bg" />
		<view class="content" style="display: flex;justify-content: space-around;">
			<div class="form-container">
			         <div class="form-group" >
			            <span style="margin-right: 60px;font-size: 14px;">账户余额</span>
			            <span class="amount" style="color: orangered;font-size: 18px;"> ¥1500.00</span>
			        </div>
			        <form>
			            <div class="form-group">
			                <label for="withdrawal-amount" style="margin-right: 60px;">提现金额</label>
			                <input type="text" id="withdrawal-amount" style="margin-right: 6px;width: 120px;">
							<label for="withdrawal-amount">元</label>
			            </div>
			            <div class="form-group"  >
			                <label for="real-name" style="margin-right: 60px;">真实姓名</label>
			                <input type="text" id="real-name" style="width: 120px;">
			            </div>
			            <div class="form-group" >
			                <label for="bank-select"  style="margin-right: 46px;">请选择银行</label>
			                <select id="bank-select" style="width: 180px;">
			                    <option value="1">建设银行</option>
			                    <option value="2">农业银行</option>
			                    <!-- 这里可以添加更多银行选项 -->
			                </select>
			            </div>
			            <div class="form-group" >
			                <label for="bank-account" style="margin-right: 16px;">请输入银行卡号</label>
			                <input type="text" id="bank-account" style="width: 180px;">
			            </div>
			            <div class="form-group">
			                <p class="info-text">车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写</p>
			            </div>
			            <div class="form-group">
			                <button type="submit">确认信息并提交</button>
			            </div>
			        </form>
			    </div>
		</view>
		<view class="content" style="margin-bottom: 12px;">
			<span style="font-size: 20px;">提现记录</span>
			<view style="height: 4px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
			<div class="transaction-item">
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<div class="transaction-type">商家申请提现</div>
					<div class="transaction-time">核销时间:2022-10-12 11:09</div>
				</view>
		
				<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<div class="transaction-amount">- 50.00</div>
					<div class="transaction-time">审核通过</div>
				</view>
		
			</div>
			<view style="height: 2px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
		<div class="transaction-item">
			<view style="display: flex;flex-direction: column;justify-content: space-between;">
				<div class="transaction-type">商家申请提现</div>
				<div class="transaction-time">核销时间:2022-10-12 11:09</div>
			</view>
				
				<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<div class="transaction-amount">- 50.00</div>
					<div class="transaction-time">审核中</div>
				</view>
			
				
		</div>
			<view style="height: 2px;background-color: #e3e3e366;margin-bottom: 12px;margin-top: 6px;"></view>
		<div class="transaction-item">
			<view style="display: flex;flex-direction: column;justify-content: space-between;">
				<div class="transaction-type">商家申请提现</div>
				<div class="transaction-time">核销时间:2022-10-12 11:09</div>
			</view>
				
			<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
				<div class="transaction-amount">- 50.00</div>
				<div class="transaction-time">未通过</div>
			</view>
				
		</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		background-color: #3183FB;
		height: 172px;
	}

	.content {
		position: relative;
		top: -142px;
		left: 22.5rpx;
		border-radius: 20px;
		width: 94%;
		background-color: white;
		padding: 28px 16px;
		box-sizing: border-box;
		margin-bottom: 16px;
	}
	.transaction-list {
		background-color: white;
		width: 300px;
		margin: 50px auto;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}
	
	.transaction-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		height: 60px;
	}
	
	.transaction-type {
		font-size: 14px;
		color: #333;
	}
	
	.transaction-amount {
		font-size: 14px;
		color: red;
		font-weight: bold;
	}
	
	.transaction-time {
		font-size: 12px;
		color: #999;
	}
	body {
	    font-family: Arial, sans-serif;
	    background-color: #f4f4f4;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100vh;
	    margin: 0;
	}
	
	.form-container {
	    background-color: white;
	    padding: 20px;
	    border-radius: 5px;
	    width: 400px;
	}
	
	.balance {
	    text-align: center;
	    margin-bottom: 20px;
	}
	
	.balance span:first-child {
	    display: block;
	    margin-bottom: 5px;
	}
	
	.balance.amount {
	    color: red;
	    font-size: 20px;
	}
	
	.form-group {
	    margin-bottom: 15px;
		display: flex;
		align-items: center;
	}
	
	label {
	    display: block;
	    margin-bottom: 5px;
	}
	
	input, select {
	    width: 50%;
	    padding: 10px;
	    border: 1px solid #ccc;
	    border-radius: 43px;
	}
	
	button {
	    background-color: #007BFF;
	    color: white;
	    border: none;
	    padding: 10px 20px;
	    border-radius: 43px;
		height: 42px;
		line-height: 21px;
	    cursor: pointer;
		font-size: 14px;
		width: 300px;
	}

	
	.info-text {
	    font-size: 14px;
	    color: #666;
	}
</style>
